<template>
	<view class="menu" id="menu">
		<view class="container">
			<!-- 一级导航 -->
			<view class="main" :style="{height:SystemInfo.height}">
				<van-sidebar :active-key="activeKey" @change="navbarChange">
				  <van-sidebar-item :title="item.name" v-for="(item, index) in navbar" :key="index" @click="getSec(item.id)" />
				  
				</van-sidebar>
			</view>
			<!-- 二级导航 -->
			<view class="second" :style="{height:SystemInfo.height}">
				<view class="item_menu" v-for="(item, index) in menuList" :key="index" @click="choseServer(item)">
					<view class="info">
						<view class="icon">
							<image :src="item.navpic" mode=""></image>
						</view>
						<view class="title">
							{{ item.name }}
						</view>
					</view>
					<view class="desc">

							{{ item. describe }}

					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		computed: {
			navbar() {
				return this.$store.state.navbar
			},
			token(){
				return this.$store.state.token
			}
		},
		data() {
			return {
				activeKey: 0,
				itemid: "",
				menuList: [],
				SystemInfo: {
					width: "",
					height: "",
				},
			}
		},
		onLoad(params) {
			if(params.menuid) {
				this.itemid = params.menuid
				this.getSec(this.itemid)
			}
		},
		onShow() {
			this.getIndex()
			this.getSystemInfo()
		},
		methods:{
			// 获取屏幕的宽度和高度
			getSystemInfo() {
				let self = this
				// let data = uni.getSystemInfo()
				
				this.SystemInfo.width = wx.getSystemInfoSync().windowWidth
				let num = 750 / this.SystemInfo.width
				this.SystemInfo.height = `${wx.getSystemInfoSync().windowHeight * num }rpx`
			},
			// 获取activeindex
			getIndex() {
				this.navbar.forEach((el, index) => {
					if(el.id == this.itemid) {
						this.activeKey = index
					}
				})
			},
			// 获取二级导航
			async getSec(id) {
				// console.log(id);
				let nav = await this.$Request("POST","/Index/ermenu", { id , token: this.token })
				// console.log(nav);
				if(nav.data.data) {
					this.menuList = nav.data.data
					
				}
			},
			// 导航变化
			navbarChange( e ) {
				console.log(e.detail);
				this.activeKey = e.detail
			},
			// 选择服务
			choseServer( item ) {
				console.log(item);
				if(this.token) {
						this.$store.commit("getServerName", item )
						uni.navigateTo({
							url:`/pages/createOrder/createOrder?itemname=${item.name}&itemid=${item.id}`
						})
				} else {
					uni.showToast({
						title: "请先登录",
						icon: "loading"
					})
					setTimeout(() => {
						uni.switchTab({
							url:"/pages/my/my"
						})
					}, 1000)
				}
				
			},
		}
	}
</script>

<style scoped lang="scss">
	#menu {
		width: 100%;
		box-sizing: border-box;
		.container {
			width: 100%;
			display: flex;
			.main {
				// height: 100%;
				background-color: #f2f2f2;
				overflow-y: scroll;
				&::-webkit-scrollbar {
				  width: 0;
				  height: 0;
				  color: transparent;
				}
			}
			.second {
				flex:1;
				padding: 20rpx;
				box-sizing: border-box;
				overflow-y: scroll;
				/*隐藏滚动条*/
				&::-webkit-scrollbar {
				  width: 0;
				  height: 0;
				  color: transparent;
				}
				.item_menu {
					padding: 10rpx 20rpx;
					width: 100%;
					box-sizing: border-box;
					box-shadow: 0 2rpx 10rpx #999999;
					border-radius: 30rpx;
					margin: 30rpx auto;
					.info {
						width: 100%;
						box-sizing: border-box;
						display: flex;
						align-items: center;
						padding:20rpx 0;
						border-bottom: 1px solid #f2f2f2;
						.icon {
							width: 40rpx;
							height: 40rpx;
							overflow: hidden;
							image {
								width: 40rpx;
								height: 40rpx;
							}
						}
						.title {
							font-weight: bold;
							margin-left: 30rpx;
						}
					}
					.desc {
						width: 100%;
						padding: 20rpx 0;
						box-sizing: border-box;
						font-size: 20rpx;
						color: #007AFF;
					}
				}
			}
		}
	}
</style>
